<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1.性能优化与安全 | 授权安全加密 | Electrolux_blog</title>
    <meta name="description" content="hello world">
    <link rel="preload stylesheet" href="/front-base-know-blog/assets/style.4f9339b2.css" as="style">
    <script type="module" src="/front-base-know-blog/assets/app.b7849f6a.js"></script>
    <link rel="preload" href="/front-base-know-blog/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/framework.408c4d71.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/theme.bf7db135.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/know_优化_1性能优化和安全.md.270924f0.lean.js">
  <link rel="icon" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>import("/front-base-know-blog/_pagefind/pagefind.js").then(n=>{window.__pagefind__=n}).catch(()=>{console.log("not load /_pagefind/pagefind.js")});</script>
  </head>
  <body><!--v-if--><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-f0b011de><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f0b011de data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-7c10cd25><div class="container" data-v-7c10cd25><div class="title" data-v-7c10cd25><div class="VPNavBarTitle has-sidebar" data-v-7c10cd25 data-v-4d981103><a class="title" href="/front-base-know-blog/" data-v-4d981103><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg" alt data-v-6db2186b><!--]--><!--[-->Electrolux_blog<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-7c10cd25><div class="curtain" data-v-7c10cd25></div><div class="content-body" data-v-7c10cd25><!--[--><!--]--><div class="blog-search search" data-pagefind-ignore="all" data-v-7c10cd25 style="--dba016e0:1;" data-v-e09e7552><div class="nav-search-btn-wait" data-v-e09e7552><svg width="14" height="14" viewBox="0 0 20 20" data-v-e09e7552><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" data-v-e09e7552></path></svg><span class="search-tip" data-v-e09e7552>Search</span><span class="metaKey" data-v-e09e7552> K </span></div><!--teleport start--><!--teleport end--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-7c10cd25 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/know/know/1html" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端基础<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/supper/supper/1%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端工程化<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/python/flask" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Python<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/java/java" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Java<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/project/javadump%E5%88%86%E6%9E%90" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->项目<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-7c10cd25 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-7c10cd25 data-v-0394ad82 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-7c10cd25 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-7c10cd25 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f0b011de data-v-392e1bf8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-392e1bf8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-392e1bf8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-392e1bf8>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-392e1bf8 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f0b011de data-v-af16598e><div class="curtain" data-v-af16598e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af16598e><span class="visually-hidden" id="sidebar-aria-label" data-v-af16598e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>前端基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/1html" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>html(浏览器)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/2javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(1)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/3javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(2)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E6%89%8B%E5%86%99%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 手写题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 代码输出</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/5javascript-es6" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(4) | es6</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/9javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(5)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/6ts" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>TypeScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/7css" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>CSS</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/8bug" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>BUG</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>计算机基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/1%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>计算机网络</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>框架 | 工具</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/1vue" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/2react" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>react</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/3ssr" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ssr</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/4%E5%BE%AE%E5%89%8D%E7%AB%AF" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>微前端</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/5vue3" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue3</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/6nginx" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>nginx</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/7python" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>python</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/8ffmpeg" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ffmpeg</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/7tensorFlow" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>tensorFlow</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/8mediapipe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>mediapipe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/10aframe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>aframe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/11%E9%80%86%E5%90%91%E6%95%B0%E6%8D%AEcrawl" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>逆向数据crawl</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/12threejs" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>threejs</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/13electron" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/17webpack" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible has-active" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>优化 | 工程</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/1%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%92%8C%E5%AE%89%E5%85%A8" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化和安全</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/3%E7%AE%97%E6%B3%95" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>算法</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/4%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/5npm,%E7%BB%84%E4%BB%B6%E5%BA%93%E6%9E%84%E9%80%A0" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>组件库构造</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/6webrtc" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webrtc</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/9.wasm" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>wasm</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/11.webcomponent" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webcomponent</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/12.pwa" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>pwa</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-pagefind-body data-v-f0b011de data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-9a431c33><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _front-base-know-blog_know_%E4%BC%98%E5%8C%96_1%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%92%8C%E5%AE%89%E5%85%A8" data-v-c4b0d3cf><div><h1 id="_1-性能优化与安全-授权安全加密" tabindex="-1">1.性能优化与安全 | 授权安全加密 <a class="header-anchor" href="#_1-性能优化与安全-授权安全加密" aria-label="Permalink to &quot;1.性能优化与安全 | 授权安全加密&quot;">​</a></h1><nav class="table-of-contents"><ul><li><a href="#_3-1-常见web攻击">3.1.常见Web攻击</a><ul><li><a href="#_3-1-1-xss">3.1.1 XSS</a></li><li><a href="#_3-1-2-csrf">3.1.2 CSRF</a></li><li><a href="#_3-1-3-sql注入">3.1.3 SQL注入</a></li><li><a href="#_3-1-4-双包危险">3.1.4 双包危险</a></li></ul></li><li><a href="#_3-2-前端性能优化">3.2.前端性能优化</a><ul><li><a href="#_3-2-1-常用方法">3.2.1 常用方法</a></li><li><a href="#_3-2-2-常用指标">3.2.2 常用指标</a></li><li><a href="#_3-2-3-指标函数">3.2.3 指标函数</a></li></ul></li><li><a href="#_3-3-polyfill">3.3.polyfill</a></li><li><a href="#_3-4-页面白屏的解决办法-骨架屏">3.4.页面白屏的解决办法 骨架屏</a></li><li><a href="#_3-6-gzip-开启两种">3.6 gzip 开启两种</a></li><li><a href="#_3-7-数据埋点">3.7 数据埋点</a></li><li><a href="#_3-8-安全性https-script-meta-js">3.8 安全性https script | meta | js</a><ul><li><a href="#_3-8-1-content-security-policy">3.8.1 content-security-policy</a></li><li><a href="#_3-8-2-strict-transport-security">3.8.2 strict-transport-security</a></li><li><a href="#_3-8-3-x-frame-options">3.8.3 x-frame-options</a></li><li><a href="#_3-8-4-nonce">3.8.4 nonce</a></li><li><a href="#_3-8-5-integrity">3.8.5 integrity</a></li><li><a href="#_3-8-6-crossorigin">3.8.6 crossorigin</a></li></ul></li><li><a href="#_3-9-学习大厂实操">3.9 学习大厂实操</a><ul><li><a href="#_3-9-1-字节">3.9.1 字节</a></li><li><a href="#_3-9-2-拼多多">3.9.2 拼多多</a></li><li><a href="#_3-9-3-cvte">3.9.3 CVTE</a></li><li><a href="#_3-9-4-gitee">3.9.4 gitee</a></li><li><a href="#_3-9-5-谷歌">3.9.5 谷歌</a></li><li><a href="#_3-9-6-stackoverflow">3.9.6 stackoverflow</a></li><li><a href="#_3-9-6-twitter">3.9.6 twitter</a></li></ul></li><li><a href="#_3-10-性能优化示例">3.10 性能优化示例</a><ul><li><a href="#_3-10-1-html-meta头示例">3.10.1 html meta头示例</a></li><li><a href="#_3-10-2-合并前端请求-请求压缩">3.10.2 合并前端请求 | 请求压缩</a></li></ul></li><li><a href="#_3-11-长列表性能优化">3.11 长列表性能优化</a><ul><li><a href="#_3-11-1-虚拟列表">3.11.1 虚拟列表</a></li><li><a href="#_3-11-2-大列表分块渲染">3.11.2 大列表分块渲染</a></li><li><a href="#_3-11-2-前端手动分页">3.11.2 前端手动分页</a></li></ul></li><li><a href="#_3-12-防盗链">3.12 防盗链</a><ul><li><a href="#_3-12-1-nginx">3.12.1 nginx</a></li></ul></li><li><a href="#_3-13-cookie隔离">3.13 cookie隔离</a></li><li><a href="#_3-14-f12中的-字符画">3.14 f12中的 字符画</a><ul><li><a href="#_3-14-1-console-log个性化打印">3.14.1 console.log个性化打印</a></li><li><a href="#_3-14-2-生成字符画">3.14.2 生成字符画</a></li></ul></li><li><a href="#_3-15-webview-性能优化">3.15 webview 性能优化</a></li><li><a href="#_3-16-webpack常见优化手段">3.16 webpack常见优化手段</a><ul><li><a href="#_3-16-1-代码分析">3.16.1 代码分析</a></li><li><a href="#_3-16-2-编译速度">3.16.2 编译速度</a></li><li><a href="#_3-16-3-加载速度">3.16.3 加载速度</a></li><li><a href="#_3-16-4-渲染速度">3.16.4 渲染速度</a></li><li><a href="#_3-16-5-简单口诀">3.16.5 简单口诀</a></li></ul></li><li><a href="#_3-17-优化数据结构">3.17 优化数据结构</a><ul><li><a href="#_3-17-1-背景">3.17.1 背景</a></li><li><a href="#_3-17-2-映射">3.17.2 映射</a></li></ul></li><li><a href="#_3-18-授权加密算法">3.18 授权加密算法</a><ul><li><a href="#_3-18-1-jwt">3.18.1 jwt</a></li><li><a href="#_3-18-2-oauth2">3.18.2 OAuth2</a></li><li><a href="#_3-18-3-aes-rsa">3.18.3 AES | RSA</a></li></ul></li><li><a href="#_3-19-运维上的性能优化">3.19 运维上的性能优化</a><ul><li><a href="#_3-19-1-缓存">3.19.1 缓存</a></li></ul></li></ul></nav><h2 id="_3-1-常见web攻击" tabindex="-1">3.1.常见Web攻击 <a class="header-anchor" href="#_3-1-常见web攻击" aria-label="Permalink to &quot;3.1.常见Web攻击&quot;">​</a></h2><h3 id="_3-1-1-xss" tabindex="-1">3.1.1 XSS <a class="header-anchor" href="#_3-1-1-xss" aria-label="Permalink to &quot;3.1.1 XSS&quot;">​</a></h3><p>跨站脚本攻击(solution:函数过滤+dom的过滤)</p><p>将恶意script代码植入页面中，需要对输入过滤来防御，或者服务器设置set-cookie来修改客户端cookie的httpOnly或secure属性，如果设置httpOnly那么js脚本就不能访问cookie(不能通过脚本直接获取cookie)，如果设置secure，那么只能https发送cookie(Cookie 是否仅仅通过安全的 HTTPS 连接传给客户端)</p><h3 id="_3-1-2-csrf" tabindex="-1">3.1.2 CSRF <a class="header-anchor" href="#_3-1-2-csrf" aria-label="Permalink to &quot;3.1.2 CSRF&quot;">​</a></h3><p>跨站请求伪造(solution:双token cookies和请求头header里面都有token)</p><p>诱导用户进入第三方网站从而获取原网站保存的凭证，需要同源策略来防御，例如验证码、token、检查http头部的Referer属性值（Referer属性值为实际发送请求的网址）</p><h3 id="_3-1-3-sql注入" tabindex="-1">3.1.3 SQL注入 <a class="header-anchor" href="#_3-1-3-sql注入" aria-label="Permalink to &quot;3.1.3 SQL注入&quot;">​</a></h3><p>将恶意的sql语句插入输入参数中，在后台解析执行，需要严格检查输入类型和格式 点击劫持：通过透明的iframe或图片覆盖，让用户误点击，可以设置响应头</p><h3 id="_3-1-4-双包危险" tabindex="-1">3.1.4 双包危险 <a class="header-anchor" href="#_3-1-4-双包危险" aria-label="Permalink to &quot;3.1.4 双包危险&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">双包危险（cjs和esm混用）</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">instance of这个函数识别不到</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">添加属性可能识别不到</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">语法混用同一个环境会</span></span></code></pre></div><h2 id="_3-2-前端性能优化" tabindex="-1">3.2.前端性能优化 <a class="header-anchor" href="#_3-2-前端性能优化" aria-label="Permalink to &quot;3.2.前端性能优化&quot;">​</a></h2><h3 id="_3-2-1-常用方法" tabindex="-1">3.2.1 常用方法 <a class="header-anchor" href="#_3-2-1-常用方法" aria-label="Permalink to &quot;3.2.1 常用方法&quot;">​</a></h3><ul><li><p>低请求量：合并资源（例如webpack抽离公共模块），gzip压缩，懒加载（路由懒加载、UI框架按需引入、图片表格懒加载）</p></li><li><p>加快请求速度：DNS预解析(字节是这样做的：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">&lt;link rel=&quot;dns-prefetch&quot; href=&quot;//sso.douyin.com&quot;&gt;</span></span></code></pre></div><p>)、CDN分发、资源并行加载</p></li><li><p>合理使用缓存：webStorage(localStorage, sessionStorage), HTTP缓存，Service Worker（利用Web Worker离线缓存资源）</p></li><li><p>渲染：JS/CSS优化</p></li></ul><h3 id="_3-2-2-常用指标" tabindex="-1">3.2.2 常用指标 <a class="header-anchor" href="#_3-2-2-常用指标" aria-label="Permalink to &quot;3.2.2 常用指标&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">首屏渲染时间</span><span style="color:#A6ACCD;">(fcp:利用permance这个api来实现fcp。response_start</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">navigation_start </span><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">后面全部加载完</span><span style="color:#A6ACCD;">(ra:reponsend</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">responstart)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fid:首次输入延迟。 </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">lighthouse或者人工判断</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">5.</span></span>
<span class="line"><span style="color:#A6ACCD;">ttl（界面交互时间）</span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> time to interactive </span></span>
<span class="line"><span style="color:#A6ACCD;">lcp（largest Contentful Paint（最大内容渲染时间） ）</span></span></code></pre></div><h3 id="_3-2-3-指标函数" tabindex="-1">3.2.3 指标函数 <a class="header-anchor" href="#_3-2-3-指标函数" aria-label="Permalink to &quot;3.2.3 指标函数&quot;">​</a></h3><h4 id="_3-2-3-1-fcp-getentries-paint" tabindex="-1">3.2.3.1 fcp(getEntries(&#39;paint&#39;)) <a class="header-anchor" href="#_3-2-3-1-fcp-getentries-paint" aria-label="Permalink to &quot;3.2.3.1  fcp(getEntries(&#39;paint&#39;))&quot;">​</a></h4><p>这个是第一个渲染的element进行绘制</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> fcp </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> performance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getEntries</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">paint</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">filter</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">entry</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> entry</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">==</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">first-contentful-paint</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)[</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">startTime</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="_3-2-3-2-fp-getentries-paint" tabindex="-1">3.2.3.2 fp(getEntries(&#39;paint&#39;)) <a class="header-anchor" href="#_3-2-3-2-fp-getentries-paint" aria-label="Permalink to &quot;3.2.3.2 fp(getEntries(&#39;paint&#39;))&quot;">​</a></h4><p>对第一个渲染的像素点进行绘制</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> fp </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> performance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getEntries</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">paint</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">filter</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">entry</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> entry</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name </span><span style="color:#89DDFF;">==</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">first-paint</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)[</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">startTime</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="_3-2-3-3-dcl" tabindex="-1">3.2.3.3 dcl <a class="header-anchor" href="#_3-2-3-3-dcl" aria-label="Permalink to &quot;3.2.3.3 dcl&quot;">​</a></h4><p>文档被加载 <a href="https://link.segmentfault.com/?enc=8Mik%2FEnAQVayIoO73PUB6g%3D%3D.V%2Fj8ccVJVbiEJtwrwA3IjdEa8Ei%2F3%2BGPkhTJlsVxN2lq8lIZECxJHpSbBLBITebEs%2FxVwYiET4IYg6kcG9G6ujnb8TKPA26LtFGpy96kyA7iRX54ivQCdpxzBpermjWR" target="_blank" rel="noreferrer"><code>DOMContentLoaded</code></a> :HTML文档的加载与解析(一般比load 块)</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">performance</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">domContentLoadedEventStart </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> performance</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fetchStart</span></span></code></pre></div><h4 id="_3-2-3-4-load" tabindex="-1">3.2.3.4 load <a class="header-anchor" href="#_3-2-3-4-load" aria-label="Permalink to &quot;3.2.3.4 load&quot;">​</a></h4><p>资源被加载</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">performance</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">loadEventEnd </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> performance</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">timing</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fetchStart</span></span></code></pre></div><h2 id="_3-3-polyfill" tabindex="-1">3.3.polyfill <a class="header-anchor" href="#_3-3-polyfill" aria-label="Permalink to &quot;3.3.polyfill&quot;">​</a></h2><p>本质是一块代码，为兼容性有问题的浏览器提供它不支持的功能。使用时只需要script标签引入即可。</p><h2 id="_3-4-页面白屏的解决办法-骨架屏" tabindex="-1">3.4.页面白屏的解决办法 骨架屏 <a class="header-anchor" href="#_3-4-页面白屏的解决办法-骨架屏" aria-label="Permalink to &quot;3.4.页面白屏的解决办法 骨架屏&quot;">​</a></h2><p>资源预加载 代码分割并行加载（webpack） 路由按需加载，UI框架按需引入</p><h2 id="_3-6-gzip-开启两种" tabindex="-1">3.6 gzip 开启两种 <a class="header-anchor" href="#_3-6-gzip-开启两种" aria-label="Permalink to &quot;3.6 gzip 开启两种&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">注意一下 webpack的compression</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">webpack</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">plugin要安装上。打包的时候生成gz为结尾的文。件仅仅是生成gzip文件，浏览器访问并不会自动识别，也不能直接引入gzip文件，需要服务器端开启gzip访问权限。由于动态压缩会占用浏览器资源，所以我们可以提前gz压缩</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//第一种是当用户请求文件时压缩文件，显然压缩文件需要耗费 CPU 和内存，而且是每次访问时都要重新压缩一次。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//另一种是当用户请求文件时，直接访问文件旁边的同名 .gz 文件，显然这不需要耗费多少 CPU 和内存。如果没有同名文件，再去做压缩。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">nginx</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//开启gzip访问</span></span>
<span class="line"><span style="color:#A6ACCD;">gzip  on</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">gzip_types text</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">plain application</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">javascript   application</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">javascript text</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">css application</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">xml text</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">javascript application</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">httpd</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">php image</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">jpeg image</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">gif image</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">png</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">#由于nginx的压缩发生在浏览器端而微软的ie6很坑爹</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">会导致压缩后图片看不见所以该选</span></span>
<span class="line"><span style="color:#A6ACCD;">项是禁止ie6发生压缩</span></span>
<span class="line"><span style="color:#A6ACCD;">gzip_disable </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">MSIE [1-6]</span><span style="color:#A6ACCD;">\.</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">#如果文件大于1k就启动压缩</span></span>
<span class="line"><span style="color:#A6ACCD;">gzip_min_length 1k</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">#以16k为单位</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">按照原始数据的大小以4倍的方式申请内存空间</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">一般此项不要修改</span></span>
<span class="line"><span style="color:#A6ACCD;">gzip_buffers </span><span style="color:#F78C6C;">4</span><span style="color:#A6ACCD;"> 16k</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">#压缩的等级</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">数字选择范围是1</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">9</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">数字越小压缩的速度越快</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">消耗cpu就越大</span></span>
<span class="line"><span style="color:#A6ACCD;">gzip_comp_level </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">#引导的在</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">etc</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">nginx</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">conf</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">d目录下所有后缀为</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">conf的子配置文件</span></span>
<span class="line"><span style="color:#A6ACCD;">include </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">etc</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">nginx</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">conf</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">d</span><span style="color:#676E95;font-style:italic;">/*.conf;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">查看一个网站是否使用gzip压缩，可以通过控制台查看打开响应头中的Content-Encoding选项，如果出现gzip，则开启成功</span></span></code></pre></div><h2 id="_3-7-数据埋点" tabindex="-1">3.7 数据埋点 <a class="header-anchor" href="#_3-7-数据埋点" aria-label="Permalink to &quot;3.7 数据埋点&quot;">​</a></h2><p>数据埋点上报统一的入口:可以监听defineproerty的get方法</p><h2 id="_3-8-安全性https-script-meta-js" tabindex="-1">3.8 安全性https script | meta | js <a class="header-anchor" href="#_3-8-安全性https-script-meta-js" aria-label="Permalink to &quot;3.8 安全性https script | meta | js&quot;">​</a></h2><h3 id="_3-8-1-content-security-policy" tabindex="-1">3.8.1 content-security-policy <a class="header-anchor" href="#_3-8-1-content-security-policy" aria-label="Permalink to &quot;3.8.1 content-security-policy&quot;">​</a></h3><h4 id="_3-8-1-1-大厂示例" tabindex="-1">3.8.1.1 大厂示例 <a class="header-anchor" href="#_3-8-1-1-大厂示例" aria-label="Permalink to &quot;3.8.1.1 大厂示例&quot;">​</a></h4><p>字节官网策略:只是上报数据，并没有在reponse中直接中限制策略</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">content-security-policy-report-only: frame-ancestors https://tcs.bytedance.net https://*.douyin.com;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">default-src &#39;self&#39; data: blob: &#39;unsafe-inline&#39; &#39;unsafe-eval&#39; *.amemv.com ;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">img-src &#39;self&#39; blob: data: android-webview-video-poster: &#39;unsafe-inline&#39; &#39;unsafe-eval&#39; *;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">connect-src &#39;self&#39; wss: *;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">font-src &#39;self&#39; *.bytedance.com *.bytescm.com;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">media-src &#39;self&#39; blob: data: &#39;unsafe-inline&#39; &#39;unsafe-eval&#39; *.ixigua.com *.snssdk.com *.pstatp.com  *.douyin.com ;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">report-uri https://i.snssdk.com/log/sentry/v2/api/slardar/main/?ev_type=csp&amp;bid=douyin_web;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">report-to main-endpoint;child-src &#39;self&#39; data: blob: *.bytedance.com live.douyin.com *</span></span></code></pre></div><h4 id="_3-8-1-2-基本示例" tabindex="-1">3.8.1.2 基本示例 <a class="header-anchor" href="#_3-8-1-2-基本示例" aria-label="Permalink to &quot;3.8.1.2 基本示例&quot;">​</a></h4><p>只允许从指定的源来加载，减少和报告 XSS 攻击</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">content</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">security</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">policy：内容安全策略</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">content-security-policy</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;"> default-src &#39;self&#39;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">content-security-policy-report-only</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">策略</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">--2.如果 HTTP 头与 Meta 定义同时存在，则优先采用 HTTP 中的定义。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">--3.报告示例</span></span>
<span class="line"><span style="color:#A6ACCD;">Content-Security-Policy: default-src &#39;self&#39;; report-uri http://reportcollector.example.com/collector.cgi</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">--3.禁止示例</span></span>
<span class="line"><span style="color:#A6ACCD;"> &lt;!-- 不能分成两行写，不然报错。这些东西都是字面意思--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Content-Security-Policy</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">default-src &#39;self&#39;;script-src  &#39;unsafe-inline&#39; ;style-src https://unpkg.com &#39;unsafe-inline&#39; ; font-src https://unpkg.com</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;!--所有http变成https链接  --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Content-Security-Policy</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">upgrade-insecure-requests</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span></code></pre></div><h3 id="_3-8-2-strict-transport-security" tabindex="-1">3.8.2 strict-transport-security <a class="header-anchor" href="#_3-8-2-strict-transport-security" aria-label="Permalink to &quot;3.8.2 strict-transport-security&quot;">​</a></h3><p>（reponse）</p><h4 id="_3-8-2-1-大厂示例" tabindex="-1">3.8.2.1 大厂示例 <a class="header-anchor" href="#_3-8-2-1-大厂示例" aria-label="Permalink to &quot;3.8.2.1 大厂示例&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">字节官网策略：strict-transport-security: max-age=31536000;</span></span></code></pre></div><h4 id="_3-8-2-2-基本示例" tabindex="-1">3.8.2.2 基本示例 <a class="header-anchor" href="#_3-8-2-2-基本示例" aria-label="Permalink to &quot;3.8.2.2 基本示例&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">全称是https strict</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">transport</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">security：严格安全传输</span></span>
<span class="line"><span style="color:#A6ACCD;">如果在有效期内用http访问这个地址，那么会返回307重定向</span></span>
<span class="line"><span style="color:#A6ACCD;">示例：strict</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">transport</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">security</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">max</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">age</span><span style="color:#89DDFF;">=</span><span style="color:#F78C6C;">86400</span><span style="color:#A6ACCD;">   (秒)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">有个问题是你在https设置这个请求是有效的，但是你要是在http设置这个请求头完全无效</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">strict-transport-security</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">max-age=86400</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_3-8-3-x-frame-options" tabindex="-1">3.8.3 x-frame-options <a class="header-anchor" href="#_3-8-3-x-frame-options" aria-label="Permalink to &quot;3.8.3 x-frame-options&quot;">​</a></h3><p>字节官网策略：x-frame-options: DENY</p><p>可以不允许别人用iframe加载你的界面</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">一般就三个值：</span></span>
<span class="line"><span style="color:#A6ACCD;">X-Frame-Options：DENY（不允许使用）  </span></span>
<span class="line"><span style="color:#A6ACCD;">SAMEORIGIN （同源使用） </span></span>
<span class="line"><span style="color:#A6ACCD;">frame-ancestors b.com  （允许xx嵌套）</span></span>
<span class="line"><span style="color:#A6ACCD;">frame-src （允许加载xx）</span></span></code></pre></div><h3 id="_3-8-4-nonce" tabindex="-1">3.8.4 nonce <a class="header-anchor" href="#_3-8-4-nonce" aria-label="Permalink to &quot;3.8.4 nonce&quot;">​</a></h3><p>script上的js完整性和安全性校验</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">reponse返回的时候的header值：Content</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Security</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">Policy</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> script</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">src </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">nonce-Ef</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">script nonce</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">nonce-Ef</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./hello.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_3-8-5-integrity" tabindex="-1">3.8.5 integrity <a class="header-anchor" href="#_3-8-5-integrity" aria-label="Permalink to &quot;3.8.5 integrity&quot;">​</a></h3><p>常用于cdn上面</p><h4 id="_3-8-5-1-大厂示例" tabindex="-1">3.8.5.1 大厂示例 <a class="header-anchor" href="#_3-8-5-1-大厂示例" aria-label="Permalink to &quot;3.8.5.1 大厂示例&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">字节把这里进行了打包，因此我们看不到。</span></span>
<span class="line"><span style="color:#A6ACCD;">common-monitors里面有integrity这个属性</span></span></code></pre></div><h4 id="_3-8-5-2-例子" tabindex="-1">3.8.5.2 例子 <a class="header-anchor" href="#_3-8-5-2-例子" aria-label="Permalink to &quot;3.8.5.2 例子&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">可以通过 </span><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//www.srihash.org/ 生成hash值 </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">然后</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">script type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">module</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">app.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> integrity</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sha256</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#A6ACCD;">script</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> 填进去hash值</span></span></code></pre></div><h3 id="_3-8-6-crossorigin" tabindex="-1">3.8.6 crossorigin <a class="header-anchor" href="#_3-8-6-crossorigin" aria-label="Permalink to &quot;3.8.6 crossorigin&quot;">​</a></h3><p>是否跨域</p><h2 id="_3-9-学习大厂实操" tabindex="-1">3.9 学习大厂实操 <a class="header-anchor" href="#_3-9-学习大厂实操" aria-label="Permalink to &quot;3.9 学习大厂实操&quot;">​</a></h2><p>下面这些大厂meta的name和description都是有的</p><h3 id="_3-9-1-字节" tabindex="-1">3.9.1 字节 <a class="header-anchor" href="#_3-9-1-字节" aria-label="Permalink to &quot;3.9.1 字节&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">CSP安全头</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">content</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">security</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">policy</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">report</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">only</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">report</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">uri </span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">HSTS安全头：</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">meta http</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">strict-transport-security</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">max-age=86400  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">frame</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">options：不允许别人用iframe加载你的界面</span></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">link的rel属性用dns</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">prefetch预加载</span></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">用了CSP安全头但是没用他最常见的content</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">security</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">policy而是用x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">xss</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">protection进行了替换。x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">xss</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">protection</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> mode</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">block对于CSP的好处是可以对那些暂时不支持CSP的浏览器进行保护。当检测到xss脚本的时候，页面会停止加载</span></span>
<span class="line"><span style="color:#A6ACCD;">6</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">script用了 crossorigin，nonce，integrity 做安全</span></span>
<span class="line"><span style="color:#A6ACCD;">7</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">甚至js中还有roles，aria</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">checked属性</span></span>
<span class="line"><span style="color:#A6ACCD;">8</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tdk</span></span>
<span class="line"><span style="color:#A6ACCD;">总结</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x开头的reponse头：x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">xss</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">protection，x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">frame</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">options </span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">安全的reponse头：STS ，CSP </span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">安全的js:dns</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">prefetch， crossorigin，nonce（跟csp一起用），integrity（hash） </span></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">人文：roles，aria</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">checked</span></span></code></pre></div><h3 id="_3-9-2-拼多多" tabindex="-1">3.9.2 拼多多 <a class="header-anchor" href="#_3-9-2-拼多多" aria-label="Permalink to &quot;3.9.2 拼多多&quot;">​</a></h3><p>总结：稍逊一筹</p><div class="language-JS"><button title="Copy Code" class="copy"></button><span class="lang">JS</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">没有用CSP，HSTS</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">link的rel属性用preload</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">script用了crossorigin</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">async</span></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">meta的cache</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">control 和 pragma 和 expires</span></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tdk</span></span></code></pre></div><h3 id="_3-9-3-cvte" tabindex="-1">3.9.3 CVTE <a class="header-anchor" href="#_3-9-3-cvte" aria-label="Permalink to &quot;3.9.3 CVTE&quot;">​</a></h3><p>总结：.........</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">tdk</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">frame</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">options </span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">甚至https的官网显示是不安全的</span></span></code></pre></div><h3 id="_3-9-4-gitee" tabindex="-1">3.9.4 gitee <a class="header-anchor" href="#_3-9-4-gitee" aria-label="Permalink to &quot;3.9.4 gitee&quot;">​</a></h3><p>总结：基本没有做安全性js的设置，但是有一些点确实是很有意思的</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">meta</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> x</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">dns</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">prefetch</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">control </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">viewport</span><span style="color:#A6ACCD;">(最大最小都有设置) </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> X</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">UA</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Compatible（设置成ie的）</span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> google（class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">notranslate</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> ， 这一点非常有意思。只要给不想被翻译的地方添加class的类名 notranslate也可以做到）</span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> Cache</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">control（no</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">cache） Expires（</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> dns</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">prefetch </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> google</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">script ：async defer</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">defer</span><span style="color:#89DDFF;">&quot;</span></span></code></pre></div><h3 id="_3-9-5-谷歌" tabindex="-1">3.9.5 谷歌 <a class="header-anchor" href="#_3-9-5-谷歌" aria-label="Permalink to &quot;3.9.5 谷歌&quot;">​</a></h3><p>总结：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">jsmodel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">data</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> jsname</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">data</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> jsaction</span></span></code></pre></div><h3 id="_3-9-6-stackoverflow" tabindex="-1">3.9.6 stackoverflow <a class="header-anchor" href="#_3-9-6-stackoverflow" aria-label="Permalink to &quot;3.9.6 stackoverflow&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">og 和 twitter开头的一系列属性</span></span>
<span class="line"><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//developers.facebook.com/docs/plugins/share-button/#example</span></span>
<span class="line"><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//www.nousbuild.org/codeu/custom-share-link/</span></span>
<span class="line"><span style="color:#FFCB6B;">og</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">title </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">og</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">type </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">og</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">url </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">og</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">image </span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">基于Open Graph 的东西，分享出去的时候能够按照特定方式进行解析。目前企业微信上已经实现</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">script 的 async</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">http</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">equiv （利于开发人员增加实验性功能） </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 令牌相等可以开启新功能 ， 有Popover API，WebGL </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">，Picture</span><span style="color:#89DDFF;">-in-</span><span style="color:#A6ACCD;">Picture </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> App Dark Mode 等新功能</span></span>
<span class="line"><span style="color:#A6ACCD;">http</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">equiv 的 origin</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">tria：</span><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//developer.chrome.com/origintrials/#/trials/active</span></span></code></pre></div><h3 id="_3-9-6-twitter" tabindex="-1">3.9.6 twitter <a class="header-anchor" href="#_3-9-6-twitter" aria-label="Permalink to &quot;3.9.6 twitter&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">link rel </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> preconnect </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> dns</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">prefetch </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> preload </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> meta name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;">google</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">site</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">verification</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;"> facebook</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">domain</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">verification 广告的权力 和 链接的权利</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">apple</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">mobile</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">web</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">title</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">一堆og</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">6</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Onion</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Location content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">xxxx.og</span><span style="color:#89DDFF;">&quot;</span></span></code></pre></div><h2 id="_3-10-性能优化示例" tabindex="-1">3.10 性能优化示例 <a class="header-anchor" href="#_3-10-性能优化示例" aria-label="Permalink to &quot;3.10 性能优化示例&quot;">​</a></h2><h3 id="_3-10-1-html-meta头示例" tabindex="-1">3.10.1 html meta头示例 <a class="header-anchor" href="#_3-10-1-html-meta头示例" aria-label="Permalink to &quot;3.10.1  html meta头示例&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- W</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    从字节学到的</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    1.CSP安全头-content-security-policy-report-only+report-uri </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    2.HSTS安全头：&lt;meta http-equiv=&quot;strict-transport-security&quot; content=&quot;max-age=86400  &quot;&gt;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    3.x-frame-options：不允许别人用iframe加载你的界面</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    4.link的rel属性用dns-prefetch预加载</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    5.用了CSP安全头但是没用他最常见的content-security-policy而是用x-xss-protection进行了替换。x-xss-protection: 1; mode=block对于CSP的好处是可以对那些暂时不支持CSP的浏览器进行保护。当检测到xss脚本的时候，页面会停止加载</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    6.今日头条的官网用了descripton和keywords做seo</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    7.script用了 crossorigin，nonce，integrity 做安全</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">--&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 设置文档的编码为 utf-8 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ISO-8859-1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 1.seo优化：搜索引擎有一些会搜索 content，使用逗号分隔，关键词，name不能变 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">keywords</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">HTML5,css,js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">description</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">这是meta的测试</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 允许抓取本页和跟踪链接，noindex和nofollow是不允许抓取链接和跟踪链接 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">robots</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index,follow</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">        viewport是移动端页面渲染的容器，手机浏览器把页面放在这个虚拟的窗口里面，通常这个viewport比实际宽度宽</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">        width可以给一个指定数值，但是会变得不好 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=10.0&quot;&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 2.CSP安全策略示例 ，不能分成两行写，不然报错。这些东西都是字面意思。--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Content-Security-Policy</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">default-src &#39;self&#39;;script-src  &#39;unsafe-inline&#39; ;style-src https://unpkg.com &#39;unsafe-inline&#39; ; font-src https://unpkg.com</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 像下面这样子设置了之后，只有在 script 标签内带有相同 nonce 值的脚本才能执行。 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;script nonce=&quot;nonce-Ef&quot; src=&quot;./hello.js&quot;&gt;&lt;/script&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;script-src &#39;nonce-Ef&#39;&quot;&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!--所有http变成https链接  --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Content-Security-Policy</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">upgrade-insecure-requests</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 3.STS安全示例 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">strict-transport-security</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">max-age=86400  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">Meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">”Window-target”</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">Content</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">”_top”</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Meta头示例</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 常用头设置 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Pragma</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">no-cache</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">expires</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">Content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">86400</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 这是2秒后跳转，如果要2秒刷新一次我们把后面的url去掉就好了 --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- &lt;meta http-equiv=&quot;refresh&quot; content=&quot;2 url=&#39;http://hi.baidu.com/tesalo/&#39;&quot;  /&gt; --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">        这里可以用来进行es6的测试</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">        Content-Security-Policy: script-src &#39;nonce-Ef&#39;;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">        &lt;script type=&quot;module&quot; src=&quot;app.js&quot; integrity=&quot;sha256&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">        &lt;script nomodule src=&quot;classic-bundle.js&quot;&gt;&lt;/script&gt; </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://unpkg.com/element-ui/lib/theme-chalk/index.css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#FFCB6B;">body</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#B2CCD6;">word-wrap</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> break-word</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">role</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">checkbox</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">aria-checked</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">checked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">111</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">username</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">tabindex</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">www.baidu.com</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">tabindex</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">-1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">注册账号</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">password</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">password</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">tabindex</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 易错：1.get 请求不能有body</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 2.第一次返回的结果是一个promise或者是respnse对象</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> datat </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">fetch</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">http://127.0.0.1:5501/docs/know/img/data.json</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">method</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">GET</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">headers</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">//   &#39;Content-Type&#39;: &#39;application/json&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cors</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">credentials</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">include</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F07178;">cache</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">default</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ceshi</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">json</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">ceshi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">result</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_3-10-2-合并前端请求-请求压缩" tabindex="-1">3.10.2 合并前端请求 | 请求压缩 <a class="header-anchor" href="#_3-10-2-合并前端请求-请求压缩" aria-label="Permalink to &quot;3.10.2 合并前端请求 | 请求压缩&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1.</span><span style="color:#C792EA;">n</span><span style="color:#A6ACCD;">ginx里面合并前端请求 nginx</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">http</span><span style="color:#89DDFF;">-</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(tengine)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">缓存 </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">请求数 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 应用优化 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 动静结合</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> user </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">userFetch</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> product </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">productFetch</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">变成</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">user </span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> products</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">allSettled</span><span style="color:#A6ACCD;">([</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#82AAFF;">userFetch</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">productFetch</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">])</span></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">handle</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">data</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">==</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">rejected</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">data</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#82AAFF;">handle</span><span style="color:#A6ACCD;">(user)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">资源供给</span><span style="color:#A6ACCD;">(cdn)  请求分流 压缩传输：nginx加上lvs f5的系统</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">js压缩请求</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/js/extend.js,jquery-1.12.4.js,jquery.min.js,validform_v5.3.2.js,wechatLink-1.1.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> promise请求合并</span></span>
<span class="line"><span style="color:#A6ACCD;">merge</span><span style="color:#89DDFF;">=</span><span style="color:#FF9CAC;">false</span></span>
<span class="line"><span style="color:#82AAFF;">zGet</span><span style="color:#A6ACCD;"> (url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> param</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> merge</span><span style="color:#89DDFF;">=</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 检查是否命中缓存中的promise如果有返回命中，不再发出请求</span></span>
<span class="line"><span style="color:#82AAFF;">checkPromise</span><span style="color:#A6ACCD;">(url</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">param)</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//然后看一下有没有相同的promise（key来控制）</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;">(merge </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#A6ACCD;"> cachePromise)</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">cachePromise</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.</span><span style="color:#C792EA;">n</span><span style="color:#A6ACCD;">ginx</span></span>
<span class="line"><span style="color:#A6ACCD;">nginx</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">http</span><span style="color:#89DDFF;">-</span><span style="color:#82AAFF;">concat</span><span style="color:#A6ACCD;">(tengine)</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">（使用的时候多传一个参数merge 表示是否使用并发合并的功能）</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">结果合并</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> requestNum </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">;</span><span style="color:#676E95;font-style:italic;">//声明请求数,用于记录请求完成计数，每完成一个请求则减1，直到为0；</span></span>
<span class="line"><span style="color:#A6ACCD;">成功的时候</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//如果请求记录为0，则触发所有请求完成的监听回调</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//此请求完成后，记录数减1</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//结果进行可靠地合并</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">分片并发上传</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> arr</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;">    [</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    [</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    [</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#82AAFF;">axios</span><span style="color:#A6ACCD;">()]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> result </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span></span>
<span class="line"><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">all</span><span style="color:#A6ACCD;">(arr[</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">result</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">all</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">arr</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">])</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">result</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">all</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">arr</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">])</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">result</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">6</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">直接promise</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">allsettle</span></span></code></pre></div><h2 id="_3-11-长列表性能优化" tabindex="-1">3.11 长列表性能优化 <a class="header-anchor" href="#_3-11-长列表性能优化" aria-label="Permalink to &quot;3.11 长列表性能优化&quot;">​</a></h2><p>我们要知道界面渲染的瓶颈主要在 dom的渲染</p><p>我们有三种方法。</p><h3 id="_3-11-1-虚拟列表" tabindex="-1">3.11.1 虚拟列表 <a class="header-anchor" href="#_3-11-1-虚拟列表" aria-label="Permalink to &quot;3.11.1 虚拟列表&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">注意一下，虚拟列表有一个点。就是有苹果系统会有虚拟滚动条不生效的bug。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">知识点：主要就是判断当前可观测视口的数据长度来进行渲染</span></span></code></pre></div><h3 id="_3-11-2-大列表分块渲染" tabindex="-1">3.11.2 大列表分块渲染 <a class="header-anchor" href="#_3-11-2-大列表分块渲染" aria-label="Permalink to &quot;3.11.2 大列表分块渲染&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">知识点：一进入界面的时候我们可以一直渲染数据</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//可以扔到table界面</span></span>
<span class="line"><span style="color:#82AAFF;">blockLoading</span><span style="color:#A6ACCD;">(originData</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> that) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">total</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">originData</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 一次插入 50 条</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">once</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">50</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//每条记录的索引</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//循环加载数据</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">loop</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">curTotal</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">curIndex</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">data</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">curTotal</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//每页多少条 少于once 我们就取值</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">pageCount</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Math</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">min</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">curTotal</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">once</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">requestAnimationFrame</span><span style="color:#F07178;">(</span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">curIndex</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">curIndex</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">pageCount</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#89DDFF;">++</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">                </span><span style="color:#676E95;font-style:italic;">// 这里运行我们的逻辑</span></span>
<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">that</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">$set</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">that</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">lastData</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">data</span><span style="color:#F07178;">[</span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;">])</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">loop</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">curTotal</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">pageCount</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">curIndex</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">pageCount</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">data</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">loop</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">total</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">index</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">originData</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="_3-11-2-前端手动分页" tabindex="-1">3.11.2 前端手动分页 <a class="header-anchor" href="#_3-11-2-前端手动分页" aria-label="Permalink to &quot;3.11.2 前端手动分页&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">知识点：直接分页</span></span></code></pre></div><h2 id="_3-12-防盗链" tabindex="-1">3.12 防盗链 <a class="header-anchor" href="#_3-12-防盗链" aria-label="Permalink to &quot;3.12  防盗链&quot;">​</a></h2><h3 id="_3-12-1-nginx" tabindex="-1">3.12.1 nginx <a class="header-anchor" href="#_3-12-1-nginx" aria-label="Permalink to &quot;3.12.1 nginx&quot;">​</a></h3><div class="language-xml-dtd"><button title="Copy Code" class="copy"></button><span class="lang">xml-dtd</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">原理是利用request的请求头refer做判断然后指定的才进行放行</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">location ~*\.(png|jpg|gif){</span></span>
<span class="line"><span style="color:#A6ACCD;">		#放行白名单</span></span>
<span class="line"><span style="color:#A6ACCD;">           valid_referers  192.168.200.222 *.example.com example.*;</span></span>
<span class="line"><span style="color:#A6ACCD;">           if ($invalid_referer){</span></span>
<span class="line"><span style="color:#A6ACCD;">                return 403;</span></span>
<span class="line"><span style="color:#A6ACCD;">           }</span></span>
<span class="line"><span style="color:#A6ACCD;">           rewrite ^/ https://blog.csdn.net/;</span></span>
<span class="line"><span style="color:#A6ACCD;">           break;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre></div><h2 id="_3-13-cookie隔离" tabindex="-1">3.13 cookie隔离 <a class="header-anchor" href="#_3-13-cookie隔离" aria-label="Permalink to &quot;3.13 cookie隔离&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cookie隔离指的是用别的域名来进行静态资源的存储</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">利用浏览器跨域的操作的时候不会带有cookie数据，这样就可以减少请求头的大小。</span></span></code></pre></div><h2 id="_3-14-f12中的-字符画" tabindex="-1">3.14 f12中的 字符画 <a class="header-anchor" href="#_3-14-f12中的-字符画" aria-label="Permalink to &quot;3.14  f12中的 字符画&quot;">​</a></h2><h3 id="_3-14-1-console-log个性化打印" tabindex="-1">3.14.1 console.log个性化打印 <a class="header-anchor" href="#_3-14-1-console-log个性化打印" aria-label="Permalink to &quot;3.14.1 console.log个性化打印&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">飞鸟%c慕鱼%c博客</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">color:red</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">color:blue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">公司诚聘前端工程师</span><span style="color:#A6ACCD;">\n</span><span style="color:#C3E88D;">%c 简历投递地址 %c http://www.badu.toudi.com </span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">color:blue;font-weight:bold;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">color:red</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">a/b/c/d</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// /g全局替换 不然只会替换第一个</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">a/b/c/d</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\/</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">g</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">\\</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">a</span><span style="color:#A6ACCD;">\b\c\d</span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(String</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">raw</span><span style="color:#89DDFF;">`${</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">}`</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h3 id="_3-14-2-生成字符画" tabindex="-1">3.14.2 生成字符画 <a class="header-anchor" href="#_3-14-2-生成字符画" aria-label="Permalink to &quot;3.14.2  生成字符画&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">使用网站patorjk</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">com</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">来生成自己的字符画，然后进行转义 把所有 \ 变成\\ 。然后在通过代码包装输出到控制台。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">String</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">raw </span><span style="color:#82AAFF;">返回转义前的字符串</span><span style="color:#A6ACCD;"> (cider面试的标准答案)</span></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> String</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">raw</span><span style="color:#89DDFF;">`</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C3E88D;">___________.__                     __                   .__                  </span></span>
<span class="line"><span style="color:#A6ACCD;">\_</span><span style="color:#C3E88D;">   _____/|  |    ____    ____  _/  |_ _______   ____  |  |   __ __ ___  ___</span></span>
<span class="line"><span style="color:#C3E88D;"> |    __)_ |  |  _/ __ </span><span style="color:#A6ACCD;">\ </span><span style="color:#C3E88D;">_/ ___</span><span style="color:#A6ACCD;">\ \ </span><span style="color:#C3E88D;">  __</span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">_  __ </span><span style="color:#A6ACCD;">\ </span><span style="color:#C3E88D;">/  _ </span><span style="color:#A6ACCD;">\ </span><span style="color:#C3E88D;">|  |  |  |  </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">  </span><span style="color:#A6ACCD;">\/</span><span style="color:#C3E88D;">  /</span></span>
<span class="line"><span style="color:#C3E88D;"> |        </span><span style="color:#A6ACCD;">\|</span><span style="color:#C3E88D;">  |__</span><span style="color:#A6ACCD;">\ </span><span style="color:#C3E88D;"> ___/ </span><span style="color:#A6ACCD;">\ </span><span style="color:#C3E88D;"> </span><span style="color:#A6ACCD;">\_</span><span style="color:#C3E88D;">__  |  |   |  | </span><span style="color:#A6ACCD;">\/</span><span style="color:#C3E88D;">(  &lt;_&gt; )|  |__|  |  / &gt;    &lt; </span></span>
<span class="line"><span style="color:#C3E88D;">/_______  /|____/ </span><span style="color:#A6ACCD;">\_</span><span style="color:#C3E88D;">__  &gt; </span><span style="color:#A6ACCD;">\_</span><span style="color:#C3E88D;">__  &gt; |__|   |__|    </span><span style="color:#A6ACCD;">\_</span><span style="color:#C3E88D;">___/ |____/|____/ /__/</span><span style="color:#A6ACCD;">\_</span><span style="color:#C3E88D;"> </span><span style="color:#A6ACCD;">\</span></span>
<span class="line"><span style="color:#C3E88D;">        </span><span style="color:#A6ACCD;">\/</span><span style="color:#C3E88D;">            </span><span style="color:#A6ACCD;">\/</span><span style="color:#C3E88D;">      </span><span style="color:#A6ACCD;">\/</span><span style="color:#C3E88D;">                                           </span><span style="color:#A6ACCD;">\/</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">`</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">={</span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">\15</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">dd</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">String</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">raw</span><span style="color:#89DDFF;">`${</span><span style="color:#A6ACCD;">a</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id</span><span style="color:#89DDFF;">}`</span></span>
<span class="line"><span style="color:#A6ACCD;">String</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">raw</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;">\15</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;"> String</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">raw</span><span style="color:#89DDFF;">`</span><span style="color:#A6ACCD;">\15</span><span style="color:#89DDFF;">`</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">`</span></span>
<span class="line"><span style="color:#C3E88D;">%c</span></span>
<span class="line"><span style="color:#C3E88D;">__________.__                __                .__                </span></span>
<span class="line"><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">_   _____/|  |   ____  _____/  |________  ____ |  |  __ _____  ___</span></span>
<span class="line"><span style="color:#C3E88D;"> |    __)_ |  | _/ __ </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">/ ___</span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">   __</span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">_  __ </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">/  _ </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">|  | |  |  </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">  </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">/  /</span></span>
<span class="line"><span style="color:#C3E88D;"> |        </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">|  |_</span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">  ___|  </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">___|  |  |  | </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">(  &lt;_&gt; )  |_|  |  /&gt;    &lt; </span></span>
<span class="line"><span style="color:#C3E88D;">/_______  /|____/</span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">___  &gt;___  &gt;__|  |__|   </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">____/|____/____//__/</span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">_ </span><span style="color:#A6ACCD;">\\</span></span>
<span class="line"><span style="color:#C3E88D;">        </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">/           </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">/    </span><span style="color:#A6ACCD;">\\</span><span style="color:#C3E88D;">/      </span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">,</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">color:red</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">st</span></span></code></pre></div><h2 id="_3-15-webview-性能优化" tabindex="-1">3.15 webview 性能优化 <a class="header-anchor" href="#_3-15-webview-性能优化" aria-label="Permalink to &quot;3.15  webview 性能优化&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">h5做性能优化，例如代码质量，js打包，css打包，cdn加速</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">app初始打开的时候，是不会不会初始化浏览器内核。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">初始化一个全局的webview（省去了70</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">700ms），访问webview直接使用webview。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">用native 开始网络请求数据，然后页面开始时候，可以向native获取代理请求（数据请求和webview的native并行）</span></span></code></pre></div><h2 id="_3-16-webpack常见优化手段" tabindex="-1">3.16 webpack常见优化手段 <a class="header-anchor" href="#_3-16-webpack常见优化手段" aria-label="Permalink to &quot;3.16 webpack常见优化手段&quot;">​</a></h2><p>前端性能优化分为两类：一类是文件加载更快、另一类是文件渲染更快</p><h3 id="_3-16-1-代码分析" tabindex="-1">3.16.1 代码分析 <a class="header-anchor" href="#_3-16-1-代码分析" aria-label="Permalink to &quot;3.16.1 代码分析&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//1.BundleAnalyzer 分析打包大小</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//2.speedmeasure：分析加载速度</span></span></code></pre></div><h3 id="_3-16-2-编译速度" tabindex="-1">3.16.2 编译速度 <a class="header-anchor" href="#_3-16-2-编译速度" aria-label="Permalink to &quot;3.16.2 编译速度&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//1.threadloader-第一次编译的时候慢一点。后面贼快</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//2.Terser 也可以在编译的时候</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//3.swc loader增加ast 解析速度</span></span></code></pre></div><h3 id="_3-16-3-加载速度" tabindex="-1">3.16.3 加载速度 <a class="header-anchor" href="#_3-16-3-加载速度" aria-label="Permalink to &quot;3.16.3 加载速度&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">体积压缩</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//1.js压缩：terser压缩-原理-1.删除注释，空格，换行符 2.变量名压缩 3.提前计算4.console.log 去除</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//2.image压缩：imagemin-原理-1.例如png会把24位的图片信息压缩成8位的信息 </span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//3.css压缩：cssnano+postcss-原理-1.删除注释，空格 2.变量名压缩</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//4.js压缩：还有一个压缩是利用webpack的压缩optimization（优化器）进行代码分包。</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//常用的是chunkIds（算法：可以选择named-短期缓存和detaerministic-长期缓存）和splitChunks（主要是里面的cacheGroups verndor的test-正则匹配名字和minChunk-最小引用数 一般来说呢.多引用的会专门分包）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//1.使用长连接</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//2.雪碧图/精灵图</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//3.节流防抖</span></span></code></pre></div><h3 id="_3-16-4-渲染速度" tabindex="-1">3.16.4 渲染速度 <a class="header-anchor" href="#_3-16-4-渲染速度" aria-label="Permalink to &quot;3.16.4 渲染速度&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">缓存（HTTP缓存、本地缓存、Vue的keep</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">alive缓存等）</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">提前渲染：ssr服务器端渲染</span></span>
<span class="line"><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;"> 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部 </span></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">懒加载</span></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">对dom查询进行缓存、将dom操作合并、使用减少重排的标签</span></span></code></pre></div><h3 id="_3-16-5-简单口诀" tabindex="-1">3.16.5 简单口诀 <a class="header-anchor" href="#_3-16-5-简单口诀" aria-label="Permalink to &quot;3.16.5  简单口诀&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">包 后套套，包 前 cp，中间gls。最后acg</span></span>
<span class="line"><span style="color:#A6ACCD;">包后压缩ttcnb treeshaking terser  cache nano（css体积）imagemin</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">webpack browlist</span></span>
<span class="line"><span style="color:#A6ACCD;">中间性能：glspf  prefetch     gzip split跟cachegroup一起用 loader </span></span>
<span class="line"><span style="color:#A6ACCD;">包前tscpd cache swc thread pnpm dllplugin</span></span>
<span class="line"><span style="color:#A6ACCD;">分析 speedmeasure bundleanalyse</span></span></code></pre></div><h2 id="_3-17-优化数据结构" tabindex="-1">3.17 优化数据结构 <a class="header-anchor" href="#_3-17-优化数据结构" aria-label="Permalink to &quot;3.17 优化数据结构&quot;">​</a></h2><h3 id="_3-17-1-背景" tabindex="-1">3.17.1 背景 <a class="header-anchor" href="#_3-17-1-背景" aria-label="Permalink to &quot;3.17.1 背景&quot;">​</a></h3><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">offConfigStatus</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">未开始</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">下架申请中</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">通过下架 </span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">拒绝下架</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 上下线状态</span></span>
<span class="line"><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">appConfigStatus</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">未上线</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">已上线</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 审核状态</span></span>
<span class="line"><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">reviewConfigStatus</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">创建中</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">待审核</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">审核未通过</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">审核已通过</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">offConfigStatus</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">appConfigStatus</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reviewConfigStatus</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">类似是这样的数据结构，但是不利于维护</span></span></code></pre></div><h3 id="_3-17-2-映射" tabindex="-1">3.17.2 映射 <a class="header-anchor" href="#_3-17-2-映射" aria-label="Permalink to &quot;3.17.2 映射&quot;">​</a></h3><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">EnumTransType</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">T</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">type</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  [</span><span style="color:#FFCB6B;">K</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">T</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">type</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">FormType</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">add</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">edit</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">AppCommonInfo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">auditStatus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 应用审核状态s</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">packageName</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 包名</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">latestVersion</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 最新版本号s</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">updateTime</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 最后更新时间</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReviewStatusEnum</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  created </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  willApproved</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  unApproved</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  Approved</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">OffStatusEnum</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  notStarted </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  underRemovalApp</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  appRemovedSuccessfully</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  appRemovedRejected</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 上下线状态</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">enum</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">AppStatusEnum</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  notOnline </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  online</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReviewStatusDataType</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">EnumTransType</span><span style="color:#89DDFF;">&lt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">keyof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> ReviewStatusEnum</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#FFCB6B;">string</span></span>
<span class="line"><span style="color:#89DDFF;">&gt;;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">OffStatusType</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">EnumTransType</span><span style="color:#89DDFF;">&lt;keyof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> OffStatusEnum</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">&gt;;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">AppStatusType</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">EnumTransType</span><span style="color:#89DDFF;">&lt;keyof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> AppStatusEnum</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">&gt;;</span></span></code></pre></div><p>const.ts</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">AppStatusType</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">OffStatusType</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#A6ACCD;">ReviewStatusDataType</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/types/manageCenter.d</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> ReviewStatusData</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ReviewStatusDataType</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">created</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">创建中</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">willApproved</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">待审核</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">unApproved</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">审核未通过</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">Approved</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">审核已通过</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> AppStatus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">AppStatusType</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">notOnline</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">未上线</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">online</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">已上线</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> OffStatus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">OffStatusType</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">notStarted</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">未开始</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">underRemovalApp</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">下架申请中</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">appRemovedSuccessfully</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">通过下架</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">appRemovedRejected</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">拒绝下架</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// AppStatusEnum </span></span>
<span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">notOnline</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">online</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">notOnline</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">online</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">2</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// AppStatus 状态如下</span></span>
<span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">notOnline</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">未上线</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">online</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">已上线</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_3-18-授权加密算法" tabindex="-1">3.18 授权加密算法 <a class="header-anchor" href="#_3-18-授权加密算法" aria-label="Permalink to &quot;3.18 授权加密算法&quot;">​</a></h2><p>一般来说用 jsencrypt 和 croto js</p><h3 id="_3-18-1-jwt" tabindex="-1">3.18.1 jwt <a class="header-anchor" href="#_3-18-1-jwt" aria-label="Permalink to &quot;3.18.1  jwt&quot;">​</a></h3><p>1.JWT生成的Token字符串需要客户端手动存储在localStorage或sessionStorage中。再次请求时，客户端需要将Token放在请求头的Authorization字段中。 2. jwt是Json Web Token的缩写，它的结构分为三个部分：header（签名的算法）.payload（过期时间）.signature（用户自己定义的字段），两两之间用【.】分隔。</p><h3 id="_3-18-2-oauth2" tabindex="-1">3.18.2 OAuth2 <a class="header-anchor" href="#_3-18-2-oauth2" aria-label="Permalink to &quot;3.18.2  OAuth2&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">OAuth2 就是一种授权机制。类似于我给外卖小哥一个临时的门禁卡</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">这个思想广泛用在sso上面</span><span style="color:#89DDFF;">.</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">例如前后端的授权码，例如a跳转到b请求b授权用户数据（现在的微信登陆和支付宝登陆就是这样），跳转时会返回一个授权码。令牌的使用一般是header加上一个Authorization。一般我们会有两个令牌，一个用来正常使用，一个用来更新令牌</span></span></code></pre></div><h3 id="_3-18-3-aes-rsa" tabindex="-1">3.18.3 AES | RSA <a class="header-anchor" href="#_3-18-3-aes-rsa" aria-label="Permalink to &quot;3.18.3 AES | RSA&quot;">​</a></h3><ul><li>(AES)对称加密：加密密钥和解密密钥相同(padding 和 key)---(一把钥匙)</li><li>(RSA)非对称加密：加密密钥和解密密钥不相同(原理是 大质数相乘十分容易，但是对其进行因式分解却十分麻烦 | 公钥加密明文,然后把加密的明文发给服务器)----虽然说好像很麻烦，但是代码却很简单(两把钥匙)</li></ul><ol><li>后端生成publicKey与privateKey</li><li>后端返回publicKey给前端</li><li>前台使用publicKey给 某一个标识<code>project-key</code>之类的 加密</li><li>后端使用publicKey与pvivateKey进行解密。</li></ol><p>最佳实践：<strong>数据加密采用AES，而把AES的加密秘钥用RSA加密，这样兼顾速度及安全性</strong></p><h2 id="_3-19-运维上的性能优化" tabindex="-1">3.19 运维上的性能优化 <a class="header-anchor" href="#_3-19-运维上的性能优化" aria-label="Permalink to &quot;3.19 运维上的性能优化&quot;">​</a></h2><p>cache-control</p><ul><li>private:表明响应只能浏览器缓存 ，服务器不能缓存它</li><li>no-cache：强制协商缓存 ,no cache 是禁止本地缓存.下一次</li><li>no-store:不使用任何缓存</li><li>max-age=0 针对这一次响应 | 后端设置了 20就是这20s你别来烦我，前端只有0才可以一直进行304的请求，不然就一直是 from cache</li></ul><h3 id="_3-19-1-缓存" tabindex="-1">3.19.1 缓存 <a class="header-anchor" href="#_3-19-1-缓存" aria-label="Permalink to &quot;3.19.1 缓存&quot;">​</a></h3><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">磁盘缓存和内存缓存</span><span style="color:#A6ACCD;">(强缓存</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">cache</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">control)：</span></span>
<span class="line"><span style="color:#A6ACCD;">memory cache</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">disk cache</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">大东西，css会被存放在磁盘中。preload prefetch也是在磁盘</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">memory里面是经常用的比如js，img</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">协商缓存 </span><span style="color:#F78C6C;">304</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">第一次200，前端后端 第二次不变就是304</span><span style="color:#89DDFF;">.</span></span></code></pre></div><table><thead><tr><th></th><th>前端</th><th>后端</th><th style="text-align:center;">nginx</th><th>结果</th></tr></thead><tbody><tr><td>cache-control</td><td>no-cache</td><td>max-age=20</td><td style="text-align:center;"></td><td>每次都会真正请求 返回200,前端在这里的优先级最高</td></tr><tr><td>cache-control</td><td>max-age=0</td><td>no-store</td><td style="text-align:center;"></td><td>每一次都是200</td></tr><tr><td>cache-control</td><td>max-age=0</td><td>max-age=20 | 0</td><td style="text-align:center;"></td><td>资源变化返回200，不然304</td></tr><tr><td>cache-control</td><td>max-age=0</td><td>no-cache</td><td style="text-align:center;"></td><td>资源变化返回200，不然304</td></tr><tr><td>cache-control</td><td>max-age=3</td><td>max-age=5</td><td style="text-align:center;">max-age=20</td><td>5 秒内返回200 disk cache (强缓存) | 5秒后资源变化返回200，不然304</td></tr><tr><td>cache-control</td><td>max-age=3</td><td>max-age=20</td><td style="text-align:center;">max-age=5</td><td>20秒后返回 后端的 的权限大于 nginx</td></tr><tr><td>cache-control</td><td>max-age=3</td><td></td><td style="text-align:center;">max-age=5</td><td>5秒后资源变化返回200，不然304.结论是前端完全max-age不等于0的时候 没用</td></tr><tr><td>cache-control</td><td>no-store</td><td></td><td style="text-align:center;">max-age=5</td><td>5秒后资源变化返回200，不然304.结论是前端的no-store完全 没用</td></tr><tr><td>cache-control</td><td>no-store</td><td></td><td style="text-align:center;">no-store</td><td>一直返回200</td></tr></tbody></table><p>前后端nginx的的优先级</p><ul><li>前端 meta 头设置 cache-control 不生效</li><li>前端只有 max-age=0 和 no-cache 生效</li><li>后端 no-cache不生效</li></ul><p>说明</p><ul><li><p>假如 后端一开始返回的是 cache-control 然后后面反悔了，cache-control 设置了 no-cache那么这个时候。前端仍然不会刷新。只有前端更改了请求才会刷新</p></li><li><p>base64 无论是从哪里得到的，基本都会存入 memory 内存里面</p></li><li><p>如果没有走proxy代理，那么 只能够监听静态资源，返回数据没办法做缓存和监听</p></li><li><p>如果是走了proxy 代理，那么nginx 中可以设置cache-control。这个时候有几种情况：</p><ul><li><p>情况一 | 单一header：nginx 设置cache-control max-age，后端返回cache-control不设置 cache-control 请求的时候第二次能够拿到缓存数据</p></li><li><p>情况二 | 两个header | 后端和nginx同时设置header ：这个时候我们可以发现 在header 设置 的 cache-control单一的时候，能够正常返回。那么我们现在来测试一下，nginx 和 后端同时设置cache-control。一般来说 header 是覆盖的 情况，但是 cache-control 是一个意外。他会迁就 去 服务器拿资源的选项例如 cache 设置 max-age=3 max-age=100000 .那么他这时候就是 max-age=3 。如果 no-cache 和 max = 100000 那么就是 no-cache的选项</p></li><li><p>Cache-Control: no-cache 和 Cache-Control: max-age=0 是有区别的， Cache-Control: max-age=0 可能会直接走缓存，no-cache 表示 会向后端 发一条请求请求后端有没有改变。如果在 max-age 后面加上 must-revalidate 那么就和 no cache 一样了</p></li><li><p>情况三 | 三个header | 后端 nginx都设置了 header的 Cache-Control，然后前端 的 Cache-Control 也有.这种情况response和request的缓存都不太一样</p><ul><li>3.1 前端 的 Cache-Control 设置成no-cache 那么 即使后端和 nginx设置了nginx 持久化也没有用,不可能304.现在看来no-cache 是用 前端 控制的 ，所以这部分的确可以</li><li>3.2 前端 的 Cache-Control max-age设置成0，12，表示这一次会这样。后端和nginx设置值的话，表示下一次会这样 会304。</li></ul></li></ul></li></ul></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>Last updated: <time datetime="2023-10-18T00:57:34.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><a class="pager-link prev" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/17webpack" data-v-face870a><span class="desc" data-v-face870a>Previous page</span><span class="title" data-v-face870a>13electron</span></a></div><div class="has-prev pager" data-v-face870a><a class="pager-link next" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/3%E7%AE%97%E6%B3%95" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>算法</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f0b011de data-v-2f86ebd2><div class="container" data-v-2f86ebd2><p class="message" data-v-2f86ebd2>MIT License.</p><p class="copyright" data-v-2f86ebd2>Copyright © 2023～present Electrolux</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"95f8ca9d\",\"java_base.md\":\"edc53698\",\"guide_quick start.md\":\"51bdad5b\",\"java_java.md\":\"07f7958b\",\"know_know_11.web3.md\":\"930011fd\",\"supper_工具基础_16.代码高亮.md\":\"775a71ba\",\"supper_工具基础_6codepen.md\":\"46f8bbbd\",\"supper_工具基础_5ps切图.md\":\"dc662c1f\",\"supper_前端库_1vueify.md\":\"04b61666\",\"supper_工程化_7性能优化和调试.md\":\"981a8dd6\",\"know_know_8adb.md\":\"ccc6c2e0\",\"supper_工具基础_1sourcetree的使用.md\":\"d71319d4\",\"know_know_10.项目具体代码优化.md\":\"f55add09\",\"supper_工程化_4docker 部署实操.md\":\"2e571e48\",\"know_know_1html.md\":\"19aaf16a\",\"supper_工具基础_8graphql.md\":\"198ddc72\",\"supper_工程化_6gitee流水线.md\":\"93a4c7ff\",\"know_know_5javascript-es6.md\":\"4c2cf8f7\",\"know_框架_16.echart.md\":\"0ada5f86\",\"know_know_3javascript基础.md\":\"900d378b\",\"know_优化_3算法.md\":\"8f5141e6\",\"know_框架_14webgl基础.md\":\"00a11e3e\",\"python_flask.md\":\"c8a0482c\",\"supper_功能_9监控停留时间.md\":\"2df00eaf\",\"know_框架_7python.md\":\"7d7eed5d\",\"supper_工程化_1工程化基础.md\":\"d48b3bbc\",\"know_优化_9wasm.md\":\"8d5d5bf6\",\"supper_工具基础_3github图床.md\":\"7073aa94\",\"supper_功能_8前端上传下载.md\":\"99e30d2a\",\"know_框架_13electron.md\":\"d3e93be3\",\"supper_前端库_3js-cookie.md\":\"91624dd6\",\"supper_工具基础_9快速mock.md\":\"215a0e2b\",\"know_know_4javascript代码输出题.md\":\"7348a30a\",\"python_base.md\":\"7acd6bad\",\"supper_功能_5微信支付.md\":\"d09d8b08\",\"know_框架_12threejs.md\":\"b6fbcf93\",\"know_框架_7tensorflow.md\":\"2ccc8062\",\"supper_工具基础_7icon实操.md\":\"f1512b60\",\"supper_工具基础_2用gitee连接ssh_linux服务器.md\":\"1bc61e8d\",\"supper_3d数字孪生_3ar的使用.md\":\"5db75881\",\"python_flask_开始.md\":\"54460465\",\"know_know_12.运维.md\":\"b8bd4e62\",\"supper_工具基础_14.vscode.md\":\"f106db65\",\"know_优化_12.pwa.md\":\"8327b1db\",\"know_know_6ts.md\":\"49f90aab\",\"supper_supper_4ui设计.md\":\"53988b67\",\"supper_功能_10数据大屏自适应.md\":\"7c40b558\",\"supper_工程化_3关于一些自动化脚本.md\":\"38029566\",\"know_know_4javascript手写题.md\":\"50a7a32f\",\"supper_工具基础_13mac的使用.md\":\"56de5b9c\",\"know_know_2javascript基础.md\":\"3d42c0ee\",\"supper_功能_7深度学习实操.md\":\"f6b94234\",\"know_优化_5npm_组件库构造.md\":\"67d2b67c\",\"know_计算机基础_1计算机网络.md\":\"5d905f95\",\"supper_3d数字孪生_2three世泊大屏实操.md\":\"beb9c2f8\",\"supper_功能_11拖拽元素.md\":\"cf7bf8a0\",\"python_llm.md\":\"e97febae\",\"know_know_7css.md\":\"06a3d117\",\"supper_supper_2实用算法.md\":\"e4baf1d9\",\"supper_工具基础_4git的基本使用.md\":\"c5629b74\",\"supper_功能_12vue-element-admin.md\":\"20c09558\",\"supper_工程化_5给包打补丁.md\":\"5103e073\",\"know_框架_11逆向数据crawl.md\":\"ae5ee06c\",\"supper_功能_4ffmpeg-rmtp监控.md\":\"39152e9b\",\"project_图表绘制.md\":\"dd437537\",\"supper_工具基础_12nvm.md\":\"329d446d\",\"know_框架_8mediapipe.md\":\"23fc89f2\",\"know_优化_6webrtc.md\":\"21589281\",\"know_优化_1性能优化和安全.md\":\"270924f0\",\"supper_功能_1小功能汇总.md\":\"5663f27a\",\"know_框架_4微前端.md\":\"76663f96\",\"supper_supper_1代码优化.md\":\"6126a362\",\"know_框架_10aframe.md\":\"7daf1aa1\",\"supper_supper_3性能优化.md\":\"86672f22\",\"know_优化_11.webcomponent.md\":\"94e3cf8a\",\"supper_功能_2小功能汇总.md\":\"692f88ef\",\"know_框架_1vue.md\":\"a9100a41\",\"supper_个人封装_1个人发包模板.md\":\"6b48d3d3\",\"supper_工具基础_10脚手架.md\":\"534226fa\",\"supper_工具基础_11figma.md\":\"ffebb5c1\",\"know_框架_15threejs.md\":\"85dc8e0c\",\"supper_功能_3小功能汇总.md\":\"9765dc9a\",\"supper_功能_6v-model组件封装.md\":\"9df7d5cf\",\"supper_3d数字孪生_5threejs的性能优化.md\":\"eafc4b19\",\"know_框架_8ffmpeg.md\":\"56543d8b\",\"supper_3d数字孪生_1webgl基础.md\":\"9602a381\",\"know_框架_4three数据大屏.md\":\"9b71f7c5\",\"know_框架_3ssr.md\":\"f78ee50f\",\"supper_前端库_2anime.js.md\":\"62c0fbd1\",\"know_框架_2react.md\":\"3ef491f2\",\"know_框架_5vue3.md\":\"a9430a8a\",\"know_框架_17webpack.md\":\"d7f6f200\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Electrolux_blog\",\"description\":\"hello world\",\"base\":\"/front-base-know-blog/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"outlineTitle\":\"目录\",\"i18nRouting\":true,\"logo\":\"https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端基础\",\"link\":\"/know/know/1html\"},{\"text\":\"前端工程化\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"Python\",\"link\":\"/python/flask.md\"},{\"text\":\"Java\",\"link\":\"/java/java.md\"},{\"text\":\"项目\",\"link\":\"/project/javadump分析.md\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/Electrolux\"}],\"footer\":{\"message\":\"MIT License.\",\"copyright\":\"Copyright © 2023～present Electrolux\"},\"sidebar\":{\"/know/\":[{\"text\":\"前端基础\",\"collapsed\":false,\"items\":[{\"text\":\"html(浏览器)\",\"link\":\"/know/know/1html\"},{\"text\":\"js基础(1)\",\"link\":\"/know/know/2javascript基础\"},{\"text\":\"js基础(2)\",\"link\":\"/know/know/3javascript基础\"},{\"text\":\"js基础(3) | 手写题\",\"link\":\"/know/know/4javascript手写题\"},{\"text\":\"js基础(3) | 代码输出\",\"link\":\"/know/know/4javascript代码输出题\"},{\"text\":\"js基础(4) | es6\",\"link\":\"/know/know/5javascript-es6\"},{\"text\":\"js基础(5)\",\"link\":\"/know/know/9javascript基础\"},{\"text\":\"TypeScript\",\"link\":\"/know/know/6ts\"},{\"text\":\"CSS\",\"link\":\"/know/know/7css\"},{\"text\":\"BUG\",\"link\":\"/know/know/8bug\"}]},{\"text\":\"计算机基础\",\"collapsed\":false,\"items\":[{\"text\":\"计算机网络\",\"link\":\"/know/计算机基础/1计算机网络\"}]},{\"text\":\"框架 | 工具\",\"collapsed\":false,\"items\":[{\"text\":\"vue\",\"link\":\"/know/框架/1vue\"},{\"text\":\"react\",\"link\":\"/know/框架/2react\"},{\"text\":\"ssr\",\"link\":\"/know/框架/3ssr\"},{\"text\":\"微前端\",\"link\":\"/know/框架/4微前端\"},{\"text\":\"vue3\",\"link\":\"/know/框架/5vue3\"},{\"text\":\"nginx\",\"link\":\"/know/框架/6nginx\"},{\"text\":\"python\",\"link\":\"/know/框架/7python\"},{\"text\":\"ffmpeg\",\"link\":\"/know/框架/8ffmpeg\"},{\"text\":\"tensorFlow\",\"link\":\"/know/优化/7tensorFlow\"},{\"text\":\"mediapipe\",\"link\":\"/know/优化/8mediapipe\"},{\"text\":\"aframe\",\"link\":\"/know/框架/10aframe\"},{\"text\":\"逆向数据crawl\",\"link\":\"/know/框架/11逆向数据crawl\"},{\"text\":\"threejs\",\"link\":\"/know/框架/12threejs\"},{\"text\":\"13electron\",\"link\":\"/know/框架/13electron\"},{\"text\":\"13electron\",\"link\":\"/know/框架/17webpack\"}]},{\"text\":\"优化 | 工程\",\"collapsed\":false,\"items\":[{\"text\":\"性能优化和安全\",\"link\":\"/know/优化/1性能优化和安全\"},{\"text\":\"算法\",\"link\":\"/know/优化/3算法\"},{\"text\":\"性能优化\",\"link\":\"/know/优化/4性能优化\"},{\"text\":\"组件库构造\",\"link\":\"/know/优化/5npm,组件库构造\"},{\"text\":\"webrtc\",\"link\":\"/know/优化/6webrtc\"},{\"text\":\"wasm\",\"link\":\"/know/优化/9.wasm\"},{\"text\":\"webcomponent\",\"link\":\"/know/优化/11.webcomponent\"},{\"text\":\"pwa\",\"link\":\"/know/优化/12.pwa\"}]}],\"/java/\":[{\"text\":\"java\",\"collapsed\":false,\"items\":[{\"text\":\"jvm\",\"link\":\"/java/java\"},{\"text\":\"springboot\",\"link\":\"/java/base\"}]}],\"/python/\":[{\"text\":\"python 基础\",\"collapsed\":false,\"items\":[{\"text\":\"服务器\",\"link\":\"/python/flask\"}]}],\"/project/\":[{\"text\":\"项目文档\",\"collapsed\":false,\"items\":[{\"text\":\"java dump\",\"link\":\"/project/图表绘制\"}]}],\"/supper/\":[{\"text\":\"代码高级\",\"collapsed\":false,\"items\":[{\"text\":\"代码优化 | 设计模式\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"设计模式与js\",\"link\":\"/supper/supper/2实用算法\"},{\"text\":\"性能优化\",\"link\":\"/supper/supper/3性能优化\"},{\"text\":\"UI设计\",\"link\":\"/supper/supper/4UI设计\"}]},{\"text\":\"工程化\",\"collapsed\":false,\"items\":[{\"text\":\"工程化基础\",\"link\":\"/supper/工程化/1工程化基础\"},{\"text\":\"webpack的配置\",\"link\":\"/supper/工程化/2webpack的配置\"},{\"text\":\"自动化脚本\",\"link\":\"/supper/工程化/3关于一些自动化脚本\"},{\"text\":\"docker 部署实操\",\"link\":\"/supper/工程化/4docker 部署实操\"},{\"text\":\"patch-package\",\"link\":\"/supper/工程化/5给包打补丁\"},{\"text\":\"gitee流水线\",\"link\":\"/supper/工程化/6gitee流水线\"}]},{\"text\":\"工具基础\",\"collapsed\":false,\"items\":[{\"text\":\"Sourcetree的使用\",\"link\":\"/supper/工具基础/1Sourcetree的使用\"},{\"text\":\"用gitee连接ssh,linux服务器\",\"link\":\"/supper/工具基础/2用gitee连接ssh,linux服务器\"},{\"text\":\"github图床\",\"link\":\"/supper/工具基础/3github图床\"},{\"text\":\"git的基本使用\",\"link\":\"/supper/工具基础/4git的基本使用\"},{\"text\":\"ps切图\",\"link\":\"/supper/工具基础/5ps切图\"},{\"text\":\"codepen\",\"link\":\"/supper/工具基础/6codepen\"},{\"text\":\"icon实操 | svg原理\",\"link\":\"/supper/工具基础/7Icon实操\"},{\"text\":\"GraphQl\",\"link\":\"/supper/工具基础/8GraphQl\"},{\"text\":\"快速mock\",\"link\":\"/supper/工具基础/9快速mock\"},{\"text\":\"脚手架\",\"link\":\"/supper/工具基础/10脚手架\"},{\"text\":\"figma\",\"link\":\"/supper/工具基础/11figma\"},{\"text\":\"nvm\",\"link\":\"/supper/工具基础/12nvm\"},{\"text\":\"苹果\",\"link\":\"/supper/工具基础/13mac的使用\"}]},{\"text\":\"个人封装\",\"collapsed\":false,\"items\":[{\"text\":\"个人封装\",\"link\":\"/supper/个人封装/1个人发包模板\"}]},{\"text\":\"前端库\",\"collapsed\":false,\"items\":[{\"text\":\"vueify\",\"link\":\"/supper/前端库/1vueify\"},{\"text\":\"anime.js\",\"link\":\"/supper/前端库/2anime.js\"},{\"text\":\"js-cookie\",\"link\":\"/supper/前端库/3js-cookie\"}]},{\"text\":\"功能\",\"collapsed\":false,\"items\":[{\"text\":\"小功能汇总1\",\"link\":\"/supper/功能/1小功能汇总\"},{\"text\":\"小功能汇总2\",\"link\":\"/supper/功能/2小功能汇总\"},{\"text\":\"小功能汇总3\",\"link\":\"/supper/功能/3小功能汇总\"},{\"text\":\"ffmpeg-rmtp监控\",\"link\":\"/supper/功能/4ffmpeg-rmtp监控\"},{\"text\":\"微信支付\",\"link\":\"/supper/功能/5微信支付\"},{\"text\":\"v-model组件封装\",\"link\":\"/supper/功能/6v-model组件封装\"},{\"text\":\"深度学习实操\",\"link\":\"/supper/功能/7深度学习实操\"},{\"text\":\"前端上传下载\",\"link\":\"/supper/功能/8前端上传下载\"},{\"text\":\"监控停留时间\",\"link\":\"/supper/功能/9监控停留时间\"},{\"text\":\"数据大屏自适应\",\"link\":\"/supper/功能/10数据大屏自适应\"},{\"text\":\"拖拽元素\",\"link\":\"/supper/功能/11拖拽元素\"},{\"text\":\"vue-element-admin\",\"link\":\"/supper/功能/12vue-element-admin\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
    
  </body>
</html>